// src/pages/sampling/SamplingRange.vue
<template>
	<div class="sampling-range">
		<el-card>
			<template #header>
				<div class="header-bar">
					<span>抽样范围设置</span>
					<el-button type="primary" size="small" @click="openDialog('add')">新增区间</el-button>
				</div>
			</template>

			<el-table :data="rangeList" border stripe>
				<el-table-column prop="from" label="起始数量" width="100" />
				<el-table-column prop="to" label="终止数量" width="100" />
				<el-table-column prop="ac" label="Ac (接受数)" width="120" />
				<el-table-column prop="re" label="Re (拒收数)" width="120" />
				<el-table-column prop="type" label="适用类型" />
				<el-table-column label="操作" width="180">
					<template #default="scope">
						<el-button size="small" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>

		<el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
			<el-form :model="form" label-width="120px">
				<el-form-item label="起始数量">
					<el-input-number v-model="form.from" :min="1" />
				</el-form-item>
				<el-form-item label="终止数量">
					<el-input-number v-model="form.to" :min="form.from" />
				</el-form-item>
				<el-form-item label="Ac (接受数)">
					<el-input-number v-model="form.ac" :min="0" />
				</el-form-item>
				<el-form-item label="Re (拒收数)">
					<el-input-number v-model="form.re" :min="0" />
				</el-form-item>
				<el-form-item label="适用类型">
					<el-select v-model="form.type" placeholder="请选择">
						<el-option label="来料" value="来料" />
						<el-option label="过程" value="过程" />
						<el-option label="出货" value="出货" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import { ref } from 'vue'

export default {
	setup() {
		const rangeList = ref([
			{ from: 1, to: 8, ac: 0, re: 1, type: '来料' },
			{ from: 9, to: 15, ac: 1, re: 2, type: '来料' },
			{ from: 16, to: 25, ac: 1, re: 2, type: '来料' },
			{ from: 26, to: 50, ac: 2, re: 3, type: '过程' },
			{ from: 51, to: 90, ac: 3, re: 4, type: '过程' },
			{ from: 91, to: 150, ac: 5, re: 6, type: '过程' },
			{ from: 151, to: 280, ac: 7, re: 8, type: '出货' },
			{ from: 281, to: 500, ac: 10, re: 11, type: '出货' },
			{ from: 501, to: 1200, ac: 14, re: 15, type: '出货' },
			{ from: 1201, to: 3200, ac: 21, re: 22, type: '出货' }
		])

		const dialogVisible = ref(false)
		const dialogTitle = ref('')
		const form = ref({})
		const currentIndex = ref(-1)

		const openDialog = (type, row) => {
			dialogTitle.value = type === 'add' ? '新增抽样区间' : '编辑抽样区间'
			dialogVisible.value = true
			if (type === 'edit') {
				form.value = { ...row }
				currentIndex.value = rangeList.value.findIndex(r => r.from === row.from && r.to === row.to)
			} else {
				form.value = { from: 1, to: 10, ac: 0, re: 1, type: '' }
				currentIndex.value = -1
			}
		}

		const submitForm = () => {
			if (currentIndex.value >= 0) {
				rangeList.value[currentIndex.value] = { ...form.value }
			} else {
				rangeList.value.push({ ...form.value })
			}
			dialogVisible.value = false
		}

		const deleteRow = (row) => {
			rangeList.value = rangeList.value.filter(r => r !== row)
		}

		return {
			rangeList,
			dialogVisible,
			dialogTitle,
			form,
			openDialog,
			submitForm,
			deleteRow
		}
	}
}
</script>

<style scoped>
.sampling-range {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}
</style>
